<template>
	<view>
		<custom-header title="品类打印" />
		<view class="search_wrap">
			<view class="s_info" @click="isShowSelectArticleNumber = true">
				<view class="name">{{search.articleNumber || '按货号'}}</view>
				<view class="icon">
					<image src="/static/common/bottom2.png" mode=""></image>
				</view>
			</view>
			<view class="s_info" @click="isShowSelectVariety = true">
				<view class="name">{{search.variety || '按品种'}}</view>
				<view class="icon">
					<image src="/static/common/bottom2.png" mode=""></image>
				</view>
			</view>
			<view class="s_info" @click="isShowSelectGrade = true">
				<view class="name">{{search.grade || '按等级'}}</view>
				<view class="icon">
					<image src="/static/common/bottom2.png" mode=""></image>
				</view>
			</view>
		</view>
		<view
			class="no_data" 
			:style="{height:'calc(100vh - 89rpx - 5rpx - '+statusBarHeight+'px)'}"
			v-if="!listData.length && listLoading != 'loading'">
				<view class="icon">
					<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nodata.png" mode=""></image>
				</view>
		</view>
		<scroll-view
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - 89rpx - 250rpx - 5rpx - '+statusBarHeight+'px)'}"
			class="scroll_content_wrap">
				<view class="table_wrap" v-if="listData.length">
					<view class="tw_head">
						<view class="th checkbox" @click="handleCheckAll">
							<image src="/static/common/check2.png" v-if="isAllCheck"></image>
							<image src="/static/common/no_check2.png" v-else></image>
						</view>
						<view class="th allocation">货位</view>
						<view class="th name">花材名称</view>
						<view class="th grade">等级</view>
						<view class="th number">数量</view>
					</view>
					<view class="tw_body" v-for="(item,index) in listData" :key="index">
						<view class="td checkbox" @click="handleCheck(item,index)"> 
							<image src="/static/common/check2.png" v-if="item.isCheck"></image>
							<image src="/static/common/no_check2.png" v-else></image>
						</view>
						<view class="td allocation"> {{ item.allocation }} </view>
						<view class="td name ellipsis"> {{ item.name }} </view>
						<view class="td grade ellipsis">{{ item.grade }}</view>
						<view class="td number ellipsis">{{ item.number }}</view>
					</view>
				</view>
				<view class="loading_wrap" v-if="listLoading == 'loading'">
					<up-loadmore
						:status="listLoading"
						iconSize="22"
						iconColor="#FF3316"
						loadingIcon='semicircle'
						loadingText=""
						/>
				</view>
		</scroll-view>
		
		<view class="total_wrap" v-if="listLoading != 'loading' && listData.length">
			<view class="printer" v-if="printer" @click="isShowSelectPrinter = true">
				<view class="name_icon">
					<view class="icon">
						<image src="/static/common/print2.png" mode=""></image>
					</view>
					<view class="name">{{ printer }}</view>
				</view>
				<view class="status">已连接</view>
			</view>
			<view class="printer" v-else @click="isShowSelectPrinter = true">
				<view>打印机未连接，</view>
				<view 
					hover-class="custom_hover"
					:hover-stay-time="200"
					class="red">去连接</view>
			</view>
			<view class="total">
				<text v-if="selectedData.length">已选{{selectedData.length}}条，</text>
				<text>共6扎</text>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn_wrap"  v-if="listLoading != 'loading' && listData.length">
			<view 
				class="btn"
				:class="{'btn_disable':!selectedData.length}"
				hover-class="confirm_hover"
				:hover-stay-time="200"
				@click="handlePrint">
				<view class="text">
					{{ selectedData.length > 1?'批量打印':'补打标签' }}
				</view>
			</view>
		</view>
		<!-- 自定义消息弹出层 -->
		<custom-popup
			:show="isShowToast" 
			:config="popupConfig"
			@confirm="isShowToast = false" />
		
		<!-- 单选框-按货号 -->
		<custom-select 
			:show="isShowSelectArticleNumber" 
			:datas="articleNumberList" 
			@confirm="handleSelectConfirmArticleNumber"
			@close="isShowSelectArticleNumber = false"></custom-select>
		<!-- 单选框-品种 -->
		<custom-select 
			:show="isShowSelectVariety" 
			:datas="varietyList" 
			@confirm="handleSelectConfirmVariety"
			@close="isShowSelectVariety = false"></custom-select>
		<!-- 单选框-等级 -->
		<custom-select 
			:show="isShowSelectGrade" 
			:datas="gradeList" 
			@confirm="handleSelectConfirmGrade"
			@close="isShowSelectGrade = false"></custom-select>
		
		<!-- 连接打印机 -->
		<up-popup 
			:show="isShowSelectPrinter" 
			@close="isShowSelectPrinter = false" 
			@open="handleOpenSelectPrinter"
			mode="bottom"
			round="10">
				<view class="printer_wrap">
					<view class="title">连接打印机</view>
					<view class="printer_no_data" v-if="!printerList.length">
						<view class="icon">
							<image src="/static/common/no_printer.png" mode=""></image>
						</view>
						<view class="hint">请检查蓝牙是否开启</view>
						<view 
							hover-class="custom_hover"
							:hover-stay-time="200"
							class="btn"
							@click="handleRefreshPrinter">刷新</view>
					</view>
					<view class="printer_list_wrap" v-else>
						<view 
							class="list" 
							v-for="(item,index) in printerList" 
							:key="index">
							<view class="name_icon">
								<view class="icon">
									<image src="/static/common/print2.png" mode=""></image>
								</view>
								<view class="name">{{ item.name }}</view>
							</view>
							<view 
								class="status" 
								:class="{'ylj':item.status == 1}"
								hover-class="custom_hover"
								:hover-stay-time="200"
								@click="isShowSelectPrinter = false">
								{{ item.status == 1?'断开':'连接' }}
							</view>
						</view>
					</view>
				</view>
		</up-popup>
	</view>
</template>

<script setup>
	import { ref,onMounted, computed } from 'vue'
	import { useStore } from 'vuex'
	const store = useStore()
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	
	// 弹窗提示
	const isShowToast = ref(false)
	const popupConfig  = ref({})
	
	// 获取列表数据
	const search = ref({})
	const listLoading = ref('loadmore')
	const listData = ref([]);
	const loadGetListData = ()=>{
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(()=>{
			listData.value = [
				{
					
					id:1,
					isCheck:false,
					allocation:10,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},{
					
					id:1,
					isCheck:false,
					allocation:10,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},{
					
					id:1,
					isCheck:false,
					allocation:10,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},{
					
					id:1,
					isCheck:false,
					allocation:10,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},{
					
					id:1,
					isCheck:false,
					allocation:10,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},{
					
					id:1,
					isCheck:false,
					allocation:10,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},{
					
					id:1,
					isCheck:false,
					allocation:10,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},{
					
					id:1,
					isCheck:false,
					allocation:10,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},{
					
					id:1,
					isCheck:false,
					allocation:10,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},{
					
					id:1,
					isCheck:false,
					allocation:10,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},{
					
					id:1,
					isCheck:false,
					allocation:10,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},{
					
					id:1,
					isCheck:false,
					allocation:10,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},
				{
					
					id:1,
					isCheck:false,
					allocation:68,
					name:'康乃馨-紫精灵',
					maturity:'生花',
					length:'65CM',
					grade:'A级',
					number:5
				},
				{
					
					id:1,
					isCheck:false,
					allocation:99,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},
				{
					
					id:1,
					isCheck:false,
					allocation:10,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},
				{
					
					id:1,
					isCheck:false,
					allocation:10,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},
			]
			listLoading.value = 'loadmore'
		},1000);
	};
	
	
	// 全选、单选
	const selectedData = ref([])
	const isAllCheck = ref(false)
	const handleCheckAll = ()=>{
		isAllCheck.value = !isAllCheck.value
		listData.value = listData.value.map(item=>{
			return {
				...item,
				isCheck:isAllCheck.value
			}
		})
		habndleSelectedData()
	}
	const handleCheck = (item,rowIndex)=>{
		listData.value = listData.value.map((item,index)=>{
			if(rowIndex == index){
				item.isCheck = !item.isCheck
				if(!item.isCheck)isAllCheck.value = false
			}
			return item
		})
		habndleSelectedData()
	}
	// 处理选中数据
	const habndleSelectedData = ()=>{
		selectedData.value = []
		listData.value.forEach((item,index)=>{
			if(item.isCheck){
				selectedData.value.push(item)
			}else{
				isAllCheck.value = false
			}
		})
	}
	
	
	// 按货号选择
	const isShowSelectArticleNumber = ref(false)
	const articleNumberList = ref(['正序','倒序'])
	const handleSelectConfirmArticleNumber = (value)=>{
		search.value.articleNumber = value
	}
	// 按品种选择
	const isShowSelectVariety = ref(false)
	const varietyList = ref(['全部','卡罗兰1','卡罗兰2','卡罗兰3','卡罗兰4'])
	const handleSelectConfirmVariety = (value)=>{
		search.value.variety = value
	}
	// 按等级选择
	const isShowSelectGrade = ref(false)
	const gradeList = ref(['全部','A级','B级','C级','D级','E级'])
	const handleSelectConfirmGrade = (value)=>{
		search.value.grade = value
	}
	
	// 连接打印机
	const printer = ref('Disney-DB6')
	const isShowSelectPrinter = ref(false)
	const printerList = ref([])
	const handleOpenSelectPrinter = ()=>{
		console.log('打开打印机列表')
	}
	const handleRefreshPrinter = ()=>{
		printerList.value = [
			{
				id:1,
				name:'Disney-DB6',
				status:1
			},
			{
				id:1,
				name:'B3S-F809062821'
			},
			{
				id:1,
				name:'B3S-F809062821'
			},
			{
				id:1,
				name:'B3S-F809062821'
			}
		]
	}
	
	
	
	
	// 打印
	const handlePrint = ()=>{
		
	}
	
	onMounted(()=>{
		isAllCheck.value = false
		loadGetListData();
	})
</script>

<style lang="scss">
	.search_wrap{
		height: 89rpx;
		display: flex;
		justify-content: space-around;
		background: #fff;
		.s_info{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #A9A9A9;
			.name{
				padding-right: 10rpx;
			}
			.icon{
				width: 20rpx;
				height: 10rpx;
				display: flex;
			}
		}
	}
	.no_data{
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		.icon{
			width: 280rpx;
			height: 322rpx;
		}
	}
	.table_wrap{
		font-size: 24rpx;
		.tw_head,.tw_body{
			display: flex;
			align-items: center;
			.th,.td{
				height: 83rpx;
				line-height: 83rpx;
				text-align: center;
			}
			.checkbox{
				width: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 32rpx;
					height:32rpx;
				}
			}
			.allocation{
				width: 80rpx;
			}
			.name{
				flex: 1;
			}
			.grade{
				width: 120rpx;
			}
			.number{
				width: 120rpx;
			}
		}
		.tw_head{
			font-weight: bold;
			color: #333;
		}
		.tw_body{
			color: #666666;
			&:nth-child(even){
				background: #fff;
			}
		}
	}
	.total_wrap{
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		.printer{
			display: flex;
			align-items: center;
			.name_icon{
				display: flex;
				align-items: center;
				.icon{
					width: 26rpx;
					height: 27rpx;
					display: flex;
					margin-right: 5rpx;
				}
			}
			.status{
				padding-left: 10rpx;
				color: #00BAAD;
			}
		}
		.red{
			color: #F5564D;
		}
	}
	.btn_wrap{
		height:150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.btn{
			width: 638rpx;
			height: 76rpx;
			border-radius: 108rpx;
			background: #F5564D;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon{
				width: 26rpx;
				height: 27rpx;
				display: flex;
			}
			.text{
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				padding-left: 10rpx;
			}
		}
	}
	.printer_wrap{
		.title{
			font-size: 32rpx;
			color: #333;
			text-align: center;
			padding: 50rpx;
			font-weight: bold;
		}
		.printer_list_wrap{
			padding:0 40rpx 40rpx;
			.list{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 0;
				border-top:1px solid #F0F0F0;
				box-sizing: border-box;
				&:first-child{
					border: 0;
				}
				.name_icon{
					display: flex;
					align-items: center;
					color: #666666;
					font-size: 28rpx;
					.icon{
						width: 26rpx;
						height: 27rpx;
						display: flex;
						margin-right: 5rpx;
					}
				}
				.status{
					width: 100rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					border-radius: 73rpx;
					background: #F5F5F5;
					font-size: 24rpx;
					color: #00BAAD;
					&.ylj{
						color: #F5564D;
					}
				}
			}
		}
		.printer_no_data{
			.icon{
				width: 240rpx;
				height: 240rpx;
				margin: 0 auto;
			}
			.hint{
				text-align: center;
				font-size: 24rpx;
				color: #BBBBBB;
			}
			.btn{
				width: 104rpx;
				height: 43rpx;
				line-height: 43rpx;
				text-align: center;
				border-radius: 84rpx;
				border: 1px solid #F5564D;
				font-size: 24rpx;
				color: #F5564D;
				margin: 30rpx auto;
			}
		}
	}
</style>
